<template>
  <div class="container">

    <!-- 添加目录弹出框 -->
    <el-dialog title="修改目录" @click-left="onClickLeft" :visible.sync="addDialogVisible" width="400px">
      <div>
        <span>目录名称</span>
        <span>
          <el-select class="amend-width" v-model="addValue">
            <el-option v-for="item in amendOptions" :key="item.value" :label="item.label" :value="item.value"> </el-option>
          </el-select>
        </span>
      </div>
      <div>
        <span>所属学科</span>
        <el-input size="medium" class="amend-width" v-model="addInput" placeholder="请输入内容"></el-input>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="addDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="addData">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 添加目录弹出框 -->
    <!-- end -->
  </div>
</template>

<script>
import { add } from '@/api/hmmm/tags'
export default {
  props: {
    amendOptions: { // 科学列表lsit数据
      type: Array,
      redirect: true
    }
  },
  data() {
    return {
      addDialogVisible: false, // 添加对话框
      addValue: null, // 添加级联内容
      addInput: '' // 添加input双向绑定
    }
  },
  methods: {
    // 添加提交
    async addData() {
      try {
        await add({
          subjectID: this.addValue,
          tagName: this.addInput
        })
        // 清空表单数据
        this.addValue = null
        this.addInput = ''

        this.addDialogVisible = false // 关闭对话框
        this.$message.success('添加成功')
      } catch (error) {
        this.$message.error('错了哦')
      }
    },
    onClickLeft() { // 父组件触发事件传递
      this.addDialogVisible = true
    }
  }
}
</script>

<style scoped lang='less'>
.amend-width {
  width: 280px;
  margin: 0 0 20px 10px;
}
</style>
